<template>
  <div class="card">
      <!-- 搜索栏 -->
    <el-form :v-model="showlog" :inline="true">
      <div class="block">
        <el-form-item label="网关ID">
          <el-input
            v-model="showlog.gateway_id"
            clearable
            size="mini"
            placeholder="网关ID"
            class="inputlength"
          ></el-input>
        </el-form-item>
        <el-form-item label="口子ID">
          <el-input
            v-model="showlog.port_id"
            clearable
            size="mini"
            placeholder="口子ID"
            class="inputlength"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单ID">
          <el-input
            v-model="showlog.order_id"
            clearable
            size="mini"
            placeholder="订单ID"
            class="inputlength"
          ></el-input>
        </el-form-item>
        <el-form-item label="命令">
          <el-input
            v-model="showlog.command"
            clearable
            size="mini"
            placeholder="命令"
            class="inputlength"
          ></el-input>
        </el-form-item>
        <el-form-item label="发送端">
          <el-select v-model="showlog.type" clearable size="mini" class="inputlength">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            class="inputlength"
            type="daterange"
            range-separator="-"
            start-placeholde="开始"
            end-placeholde="结束"
            v-model="showlog.time"
            clearable
            size="mini"
          ></el-date-picker>
        </el-form-item>
        <el-button type="primary" @click="submit" size="mini">搜索</el-button>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" class="tablestyle" height="480px">
      <el-table-column label="id" width="45px">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" width="170px">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{scope.row.created_at}}</span>
        </template>
      </el-table-column>
      <el-table-column label="网关ID" width="50px">
        <template slot-scope="scope">
          <span>{{scope.row.gateway_id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="口子ID" width="70px">
        <template slot-scope="scope">
          <span>{{scope.row.port_id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="命令" width="50px">
        <template slot-scope="scope">
          <span>{{scope.row.command}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单ID" width="70px">
        <template slot-scope="scope">
          <span>{{scope.row.order_id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" width="50px">
        <template slot-scope="scope">
          <span>{{scope.row.type}}</span>
        </template>
      </el-table-column>
      <el-table-column label="请求" width="200">
        <template slot-scope="scope">
          <el-popover placement="top" trigger="hover">
            <p>{{ scope.row.request }}</p>
            <div slot="reference">{{ scope.row.request}}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="响应" width="200px">
        <template slot-scope="scope">
          <el-popover placement="top" trigger="hover">
            <span>{{scope.row.response}}</span>
            <span slot="reference">{{scope.row.response}}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="说明" width="150px">
        <template slot-scope="scope">
          <el-popover width="100" trigger="hover" placement="top">
            <span>{{scope.row.desc}}</span>
            <span slot="reference">{{scope.row.desc}}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">解析</el-button>
        </template>
      </el-table-column>
    </el-table>
	<!-- 解析对话框 -->
	<!-- <el-dialog
		title="请求日志解析"
		:visible.sync="dialogVisible"
		width="30%">
		<json-viewer :value="requestParse"></json-viewer>
	</el-dialog>
	<el-dialog
		title="响应日志解析"
		:visible.sync="dialogVisible"
		width="30%">
		<json-viewer :value="responseParse"></json-viewer>
	</el-dialog> -->
	
	<el-dialog title="请求日志解析" :visible.sync="outerVisible">
		<json-viewer :value="requestParse"></json-viewer>
		<el-button @click="innerVisible = true">解析响应日志</el-button>
		<el-dialog
			width="30%"
			title="响应日志解析"
			:visible.sync="innerVisible"
			append-to-body>
			<json-viewer :value="responseParse"></json-viewer>
		</el-dialog>
	</el-dialog>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,20,50]"
      :page-size="pagesize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
      class="paginationStyle"
    ></el-pagination>
  </div>
</template>
<script>
export default {
	data() {
		return {
			showlog: {
				gateway_id: "",
				port_id: "",
				order_id: "",
				command: "",
				type: "",
				time: ""
			},
			options: [
				{
					label: "服务端",
					value: "0"
				},
				{
					label: "客户端",
					value: "1"
				}
			],
			tableData: [],
			currentPage: 1,
			pagesize: 10,
			total: 0,
			requestParse: [],
			responseParse: [],
			// dialogVisible: false,
			outerVisible:false,
			innerVisible:false
		};
	},
	created() {
		this.getLogs();
	},
	methods: {
		submit() {
			this.getLogs();
		},
		handleEdit(index, row) {
			this.axios.get('/api/command/parse',{
				params: {
					content: row.request,
					type: 0
				}
			}).then( res => {
				this.requestParse = res.data.data
				console.log(this.requestParse);
			});
			if(row.response) {
				this.axios.get('/api/command/parse',{
					params: {
						content: row.response,
						type: 1
					}
				}).then( res => {
					this.responseParse = res.data.data
					console.log(this.responseParse);
				});
			}
			this.outerVisible = true;
		},
		handleSizeChange(size) {
			this.pagesize = size;
			this.getLogs();
		},
		handleCurrentChange(currentPage) {
			this.currentPage = currentPage;
			this.getLogs();
		},
		getLogs() {
			let params = {
				limit: this.pagesize,
				page: this.currentPage,
				gateway_id: this.showlog.gateway_id,
				port_id: this.showlog.port_id,
				order_id: this.showlog.order_id,
				command: this.showlog.command,
				type: this.showlog.type,
				begin_date: this.showlog.time[0],
				end_date: this.showlog.time[1]
			};
			for(let item in params) {
				if(params[item] === '') {
					delete params[item];
				}
			}
			this.axios.get("/api/gateways/logs",{
				params: params
			}).then(response => {
				this.tableData = response.data.data.data;
				this.total = response.data.data.total;
			}).catch(error=>{
				alert(error);
			});
		}
	},
};
</script>
<style>
.jv-code {
	text-align :left
}
.inputlength {
  width: 140px;
}
.card {
  height: 50vw;
}
.tablestyle {
  width: 100%;
}
/* 设置表格的行高 */
.cell {
  max-height: 28px !important;
  overflow: auto !important;
}
.block {
  text-align: left;
}
.paginationStyle {
  margin: 15px 0 15px 0;
}
</style>
